
  <!-- 使用方法：
            数组传递数据：
              data:[
                {
                  image:"背景图地址",
                  title:"标题内容",
                  href:"跳转页面地址"
                }
              ]
            例：
              <qm-entry-card :data="data1"></qm-entry-card>

              data1: [
                {
                  title: "物业管理",
                  image: "static/img/function-entrance/index3/bg-fun1.png",
                  href:"/ui/center/index"
                },
              ],
   -->
 <template id="qm-entry-card">
  <div>
    <div v-for="(item, index) in data" :key="index">
      <f7-card
        class="fun-entry"
        :style="{ backgroundImage: `url(${data[index].image})` }"
      >
        <f7-card-header class="no-border pc-size">
          <p>{{ data[index].title }}</p>
          <f7-link :href="data.href || '#'" class="fun-link">
            <img
              src="static/img/function-entrance/index3/cion-fun-jiantou.svg"
              alt=""
              class="fun-enrty-img"
            />
          </f7-link>
        </f7-card-header>
      </f7-card>
    </div>
  </div>
</template>

<script>
export default {
    props: {
      data: {
        type: Array,
      },
    },
};
</script>

<style lang="less" scoped>
::v-deep.card {
  box-shadow: 0px 0px 0px 0px #fff !important;
}
.card-header:after {
    display: none;
}
.fun-entry {
  background-size: 100% 100%;

  background-repeat: no-repeat;
  padding-bottom: 36.44%;//   图片高/图片宽
  position: relative;

//   width: calc(686px * var(--ratio));
//   height: calc(250px * var(--ratio));
//   margin: 0 auto;
  margin-bottom: calc(59px * var(--ratio));
//   margin-left: calc(32px * var(--ratio));
//   margin-right: calc(32px * var(--ratio));
  .pc-size {
    width: calc(686px * var(--ratio));
    // height: calc(250px * var(--ratio));
    font-size: calc(42px * var(--ratio));
    color: var(--color-text-base);
    justify-content: start;
    padding-left: calc(56px * var(--ratio));
    height: 100%;
    position: absolute;
    .fun-link {
      margin-left: calc(16px * var(--ratio));
      .fun-enrty-img {
        width: calc(42px * var(--ratio));
        height: calc(12px * var(--ratio));
      }
    }
  }
}
</style>
